<template>
  <q-list padding>
    <template v-for='item in publicItems' :key='item.path'>
      <q-item clickable v-ripple :to='item.path'>
        <q-item-section avatar>
          <q-icon :name='item.icon' />
        </q-item-section>
        <q-item-section>{{ item.name }}</q-item-section>
      </q-item>
    </template>
    <template v-if='store.isUser'>
      <template v-for='item in userItems' :key='item.path'>
        <q-item clickable v-ripple :to='item.path'>
          <q-item-section avatar>
            <q-icon :name='item.icon' />
          </q-item-section>
          <q-item-section>{{ item.name }}</q-item-section>
        </q-item>
      </template>
    </template>
    <template v-if='store.isAdmin'>
      <template v-for='item in adminItems' :key='item.path'>
        <q-item clickable v-ripple :to='item.path'>
          <q-item-section avatar>
            <q-icon :name='item.icon' />
          </q-item-section>
          <q-item-section>{{ item.name }}</q-item-section>
        </q-item>
      </template>
    </template>
  </q-list>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
import { MenuItem } from 'app/typings';
import { useStore } from 'src/status';

const store = useStore();
const publicItems: MenuItem[] = [{
  path: '/home',
  icon: 'home',
  name: '系统主页'
}];
const userItems: MenuItem[] = [{
  path: '/orders',
  icon: 'receipt_long',
  name: '我的订单'
}, {
  path: '/add_order',
  icon: 'post_add',
  name: '提交订单'
}, {
  path: '/user',
  icon: 'person',
  name: '个人信息'
}];
const adminItems: MenuItem[] = [{
  path: '/order_manage',
  icon: 'receipt',
  name: '订单管理'
}, {
  path: '/staff_manage',
  icon: 'group',
  name: '员工管理'
}, {
  path: '/truck_manage',
  icon: 'local_shipping',
  name: '车辆管理'
}];
export default defineComponent({
  name: 'Sider',
  setup() {
    return {
      store,
      publicItems,
      userItems,
      adminItems
    };
  }
});
</script>

